<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="common/layout">
<head>
    <title>修改角色</title>

</head>
<body>
<section layout:fragment="top_menu" style="text-align: left;padding-left:  50px">
    <span style="font-size: 20px">修改角色</span>
</section>


<section layout:fragment="content">

    <div class="main" style="margin: 5px">
        <form class="form" th:action="@{/admin/role/put}" th:object="${item}" th:method="post">
            <table class="role_table">
                <tbody>
                <tr>
                    <td style="text-align: right;">
                        角色</td>
                    <td style="text-align: left">
                        <input id="role_name" th:field="*{name}"  type="text" >
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right">
                        权限</td>
                    <td >
                        <ul class="role_permission">
                            <li th:each="permission : ${permissions}">
                                <input class="role_permission" type="checkbox" th:id="${permission.id}" th:value="${permission.id}" />
                                <label th:for="${permission.id}" th:text="${permission.name}"></label>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td  colspan="2" align="center">
                        <input id="role_add" type="button" class="new_button_yellow " value="保存">
                        &nbsp;&nbsp;
                        <input type="button"  onclick="javascript:edit_cancel()"  class="new_button_yellow" value="取消">
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>

</section>


<section layout:fragment="extra_scripts">
    <script th:inline="javascript">
        $(function() {

            var old_perms = [[${item.permissionIds}]];
            var perm_arr = old_perms.split(",");
            $(".role_permission").each(function() {
                var perm = $(this).val();
                console.log(perm);
                if($.inArray(perm,perm_arr)>=0){
                    this.checked = true;
                }
            });
            console.log(perm_arr);

            $("#role_add").bind("click", function() {
                var permissions = [];
                $(".role_permission:checked").each(function(){
                    permissions.push($(this).val());
                });
                var perms = permissions.join(",");
                var role_name = $("#role_name").val();
                if(role_name.length==0 || role_name.length>10){
                    alert("角色名称必须为长度小于10的字符");
                    return ;
                }

                var data = {
                    id: [[${item.id}]],
                    name: $("#role_name").val(),
                    permissionIds: perms,
                };
                console.log(data);
                $.ajax("/admin/role/update", {
                    data: JSON.stringify(data),
                    type: "put",
                    contentType: 'application/json',
                }).done(function(data) {
                    if (data.valid) {
                        self.location.href = data.url || '/';
                    } else {
                        alert(data.errorMsg);
                    }
                });
            });
        });

        function edit_cancel() {
            self.location.href = '/admin/role';
        };
    </script>
</section>

</body>


</html>